<template>
    <div>
        <Form class="ivu-mb-16">
            <Button type="primary" @click="handleAdd">新增</Button>
            </Form>
            <Table :columns="columns" :data="list" :loading="loading" :border="true">
                <template #action="{index}">
                    <a @click="handleEdit(index)">编辑</a>
                    <Divider type="vertical"></Divider>
                    <a @click="handleDelete(index)" class="delete">删除</a>
                </template></Table>
        <Modal :title="add?'新增':'编辑'" width="960" v-model="modal" :mask-closable="false" :draggable="true">
            <Form :label-width="118" :model="formData">
                <FormItem label="选择模块">
                    <Select v-model="formData.name">
                        <Option value="医生">医生</Option>
                        <Option value="活动">活动</Option>
                        <Option value="科普">科普</Option>
                    </Select>
                </FormItem>
                <FormItem label="排序">
                    <InputNumber :precision="0" v-model="formData.sort" :min="1" />
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
import { GetHomeSetting } from '@/api/mock';
export default {
    name: 'modalName',
    data() {
        return {
            add: true,
            modal: false,
            formData: {
                name: '医生',
                status: true,
                sort: '',
                validity: '长期',
                topic: ''
            },
            loading: false,
            columns: [
                {
                    title: "id",
                    key: 'id',
                    width: 60
                },
                {
                    title: "模块",
                    key: 'name',
                    minWidth: 118
                },
                {
                    title: "排序",
                    key: 'sort',
                    width: 118
                },
                {
                    title: "创建时间",
                    key: 'createTime',
                    width: 158
                },
                {
                    title: "操作",
                    slot: 'action',
                    width: 118
                }
            ],
            list: []
        };
    },
    methods: {
        getData() {
            this.loading = true
            GetHomeSetting().then(res => {
                this.list = res.list
            }).finally(() => {
                this.loading = false
            })
        },
        handleAdd() {
            this.add = true
            this.modal = true
        },
        handleEdit(e) {
            this.add = false
            this.modal = true
        },
        handleDelete(e) {
            this.$Modal.confirm({
                title: '温馨提示',
                content: '确定删除此项?',
                onOk: () => {
                    this.list.splice(e, 1)
                    this.$Message.success('删除成功！')
                }
            })
        }
    },
    mounted() {
        this.getData()
    },
};
</script>
<style lang='less' scoped>
.imageUpdate {
    display: flex;
}
.delete {
    color: rgb(226, 5, 5)
}
</style>